<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<style>
		
			html,
			body {
				background-color: #3B3637;
				position: relative;
				width: 100%;
				height: 100%;
			}
		
			#container {
				position: absolute;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				width: 100%;
				height: 100%;
			}
		
			.firework-grp {
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
			}
		
			.firework {
				font-size: 10px;
				display: block;
				width: 8.5em;
				height: 8.5em;
				position: absolute;
			}
		
			/*位置，颜色，大小都可调*/
			.pos1 {
				left: 10%;
				top: 5%;
				color: #F44336;
				-webkit-transform: scale(0.5);
				transform: scale(0.5);
			}
		
			.pos2 {
				left: 65%;
				top: 10%;
				color: #FFC107;
				-webkit-transform: scale(0.6);
				transform: scale(0.6);
			}
		
			.pos3 {
				left: 60%;
				top: 35%;
				color: #F44336;
				-webkit-transform: scale(0.8);
				transform: scale(0.8);
			}
		
			.pos4 {
				left: 15%;
				top: 30%;
				color: #FFC107;
				-webkit-transform: scale(1);
				transform: scale(1);
			}
		
			/*烟花*/
			.drops-grp {
				display: block;
				width: 8.5em;
				height: 8.5em;
				position: absolute;
			}
		
			.drops-grp2 {
				display: block;
				width: 8.5em;
				height: 8.5em;
				position: absolute;
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}
		
			.drop {
				display: block;
				width: 1em;
				height: 2em;
				overflow: hidden;
				position: absolute;
				opacity: 0;
			}
		
			.drop:before {
				content: "";
				display: block;
				width: 1em;
				height: 1em;
				background: currentColor;
				border-radius: 50%;
			}
		
			.drop:after {
				content: "";
				display: block;
				position: relative;
				top: -0.4em;
				width: 0;
				height: 0;
				border-top: 1.4em solid currentColor;
				border-left: 0.5em solid transparent;
				border-right: 0.5em solid transparent;
			}
		
			/*烟花绽放的速度，次数，方式也可以调节*/
			.drop-1 {
				left: 3.75em;
				top: 0;
				-webkit-animation: drop1anim 1.5s ease-in-out infinite;
				animation: drop1anim 1.5s ease-in-out infinite;
			}
		
			.drop-2 {
				top: 3.25em;
				right: 0;
				-webkit-animation: drop2anim 1.5s ease-in-out infinite;
				animation: drop2anim 1.5s ease-in-out infinite;
			}
		
			.drop-3 {
				left: 3.75em;
				bottom: 0;
				-webkit-animation: drop3anim 1.5s ease-in-out infinite;
				animation: drop3anim 1.5s ease-in-out infinite;
			}
		
			.drop-4 {
				top: 3.25em;
				left: 0;
				-webkit-animation: drop4anim 1.5s ease-in-out infinite;
				animation: drop4anim 1.5s ease-in-out infinite;
			}
		
			/*延迟时间*/
			.delay1 .drop {
				-webkit-animation-delay: 0.5s;
				animation-delay: 0.5s
			}
		
			.delay2 .drop {
				-webkit-animation-delay: 1s;
				animation-delay: 1s
			}
		
			/*动画*/
			@-webkit-keyframes drop1anim {
				0% {
					top: 3.25em;
					opacity: 0;
					-webkit-transform: scale(0.3);
					transform: scale(0.3);
				}
		
				25% {
					opacity: 0;
				}
		
				50% {
					opacity: 1;
					-webkit-transform: scale(1);
					transform: scale(1);
				}
		
				100% {
					top: -0.75em;
					opacity: 0;
					-webkit-transform: scale(0.3);
					transform: scale(0.3);
				}
			}
		
			@keyframes drop1anim {
				0% {
					top: 3.25em;
					opacity: 0;
					-webkit-transform: scale(0.3);
					transform: scale(0.3);
				}
		
				25% {
					opacity: 0;
				}
		
				50% {
					opacity: 1;
					-webkit-transform: scale(1);
					transform: scale(1);
				}
		
				100% {
					top: -0.75em;
					opacity: 0;
					-webkit-transform: scale(0.3);
					transform: scale(0.3);
				}
			}
		
			@-webkit-keyframes drop2anim {
				0% {
					right: 3.75em;
					opacity: 0;
					-webkit-transform: scale(0.3) rotate(90deg);
					transform: scale(0.3) rotate(90deg);
				}
		
				25% {
					opacity: 0;
				}
		
				50% {
					opacity: 1;
					-webkit-transform: scale(1) rotate(90deg);
					transform: scale(1) rotate(90deg);
				}
		
				100% {
					right: -0.25em;
					opacity: 0;
					-webkit-transform: scale(0.3) rotate(90deg);
					transform: scale(0.3) rotate(90deg);
				}
			}
		
			@keyframes drop2anim {
				0% {
					right: 3.75em;
					opacity: 0;
					-webkit-transform: scale(0.3) rotate(90deg);
					transform: scale(0.3) rotate(90deg);
				}
		
				25% {
					opacity: 0;
				}
		
				50% {
					opacity: 1;
					-webkit-transform: scale(1) rotate(90deg);
					transform: scale(1) rotate(90deg);
				}
		
				100% {
					right: -0.25em;
					opacity: 0;
					-webkit-transform: scale(0.3) rotate(90deg);
					transform: scale(0.3) rotate(90deg);
				}
			}
		
			@-webkit-keyframes drop3anim {
				0% {
					bottom: 3.25em;
					opacity: 0;
					-webkit-transform: scale(0.3) rotate(180deg);
					transform: scale(0.3) rotate(180deg);
				}
		
				25% {
					opacity: 0;
				}
		
				50% {
					opacity: 1;
					-webkit-transform: scale(1) rotate(180deg);
					transform: scale(1) rotate(180deg);
				}
		
				100% {
					bottom: -0.75em;
					opacity: 0;
					-webkit-transform: scale(0.3) rotate(180deg);
					transform: scale(0.3) rotate(180deg);
				}
			}
		
			@keyframes drop3anim {
				0% {
					bottom: 3.25em;
					opacity: 0;
					-webkit-transform: scale(0.3) rotate(180deg);
					transform: scale(0.3) rotate(180deg);
				}
		
				25% {
					opacity: 0;
				}
		
				50% {
					opacity: 1;
					-webkit-transform: scale(1) rotate(180deg);
					transform: scale(1) rotate(180deg);
				}
		
				100% {
					bottom: -0.75em;
					opacity: 0;
					-webkit-transform: scale(0.3) rotate(180deg);
					transform: scale(0.3) rotate(180deg);
				}
			}
		
			@-webkit-keyframes drop4anim {
				0% {
					left: 3.75em;
					opacity: 0;
					-webkit-transform: scale(0.3) rotate(-90deg);
					transform: scale(0.3) rotate(-90deg);
				}
		
				25% {
					opacity: 0;
				}
		
				50% {
					opacity: 1;
					-webkit-transform: scale(1) rotate(-90deg);
					transform: scale(1) rotate(-90deg);
				}
		
				100% {
					left: -0.25em;
					opacity: 0;
					-webkit-transform: scale(0.3) rotate(-90deg);
					transform: scale(0.3) rotate(-90deg);
				}
			}
		
			@keyframes drop4anim {
				0% {
					left: 3.75em;
					opacity: 0;
					-webkit-transform: scale(0.3) rotate(-90deg);
					transform: scale(0.3) rotate(-90deg);
				}
		
				25% {
					opacity: 0;
				}
		
				50% {
					opacity: 1;
					-webkit-transform: scale(1) rotate(-90deg);
					transform: scale(1) rotate(-90deg);
				}
		
				100% {
					left: -0.25em;
					opacity: 0;
					-webkit-transform: scale(0.3) rotate(-90deg);
					transform: scale(0.3) rotate(-90deg);
				}
			}
	</style>
	<body>
		<div id="container">
			<div class="firework-grp">
				<div class="firework pos1 ">
					<div class="drops-grp">
						<div class="drop drop-1"></div>
						<div class="drop drop-2"></div>
						<div class="drop drop-3"></div>
						<div class="drop drop-4"></div>
					</div>
					<div class="drops-grp drops-grp2">
						<div class="drop drop-1"></div>
						<div class="drop drop-2"></div>
						<div class="drop drop-3"></div>
						<div class="drop drop-4"></div>
					</div>
				</div>
				<div class="firework pos2 delay1">
					<div class="drops-grp">
						<div class="drop drop-1"></div>
						<div class="drop drop-2"></div>
						<div class="drop drop-3"></div>
						<div class="drop drop-4"></div>
					</div>
					<div class="drops-grp drops-grp2">
						<div class="drop drop-1"></div>
						<div class="drop drop-2"></div>
						<div class="drop drop-3"></div>
						<div class="drop drop-4"></div>
					</div>
				</div>
				<div class="firework pos3 delay2">
					<div class="drops-grp">
						<div class="drop drop-1"></div>
						<div class="drop drop-2"></div>
						<div class="drop drop-3"></div>
						<div class="drop drop-4"></div>
					</div>
					<div class="drops-grp drops-grp2">
						<div class="drop drop-1"></div>
						<div class="drop drop-2"></div>
						<div class="drop drop-3"></div>
						<div class="drop drop-4"></div>
					</div>
				</div>
				<div class="firework pos4 ">
					<div class="drops-grp">
						<div class="drop drop-1"></div>
						<div class="drop drop-2"></div>
						<div class="drop drop-3"></div>
						<div class="drop drop-4"></div>
					</div>
					<div class="drops-grp drops-grp2">
						<div class="drop drop-1"></div>
						<div class="drop drop-2"></div>
						<div class="drop drop-3"></div>
						<div class="drop drop-4"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
